// 引入 React 库中的 useState 和 useEffect 钩子，用于状态管理和副作用处理
import React, { useState, useEffect } from "react";
// 引入 axios 库，用于发送 HTTP 请求
import axios from "axios";
// 引入样式文件，用于组件的样式设置
import './Index.scss'
// 引入自定义组件 Createtext，用于处理 AI 回复的文本
import Createtext from '../../components/CreateTexttoSpeechTask/index.jsx'

// 定义一个名为 MyComponent 的函数式组件
export const MyComponent = () => {
    // 百度 API 的 Access Key，用于身份验证
    const AK = "QtuxCv4HhB5GH2JifmNgKYVR";
    // 百度 API 的 Secret Key，用于身份验证
    const SK = "oRSeXiKTTwpYrrM3Mr61nmvAybLTLsJ0";

    // 使用 useState 钩子创建 input 状态，用于存储输入框的内容，初始值为空字符串
    const [input, setInput] = useState("");
    // 创建 responseData 状态，用于存储从 API 获取到的响应数据，初始值为 null
    const [responseData, setResponseData] = useState(null);
    // 创建 loading 状态，用于指示当前是否正在发送请求并等待响应，初始值为 false
    const [loading, setLoading] = useState(false);
    // 创建 error 状态，用于存储请求过程中出现的错误信息，初始值为 null
    const [error, setError] = useState(null);

    // 从浏览器的本地存储中获取名为 'transcriptList' 的数据
    let xiaoAI = localStorage.getItem('transcriptList');
    try {
        // 尝试将获取到的字符串数据解析为 JSON 数组
        xiaoAI = JSON.parse(xiaoAI);
        // 检查解析后的数据是否为数组，并且数组长度大于 0
        // 如果满足条件，则取数组的最后一个元素作为 xiaoAI 的值
        xiaoAI = Array.isArray(xiaoAI) && xiaoAI.length > 0 ? xiaoAI[xiaoAI.length - 1] : null;
    } catch (parseError) {
        // 如果解析过程中出现错误，将 xiaoAI 的值设置为 null
        xiaoAI = null;
    }

    // 定义一个异步函数 sendRequest，用于向百度 API 发送请求
    async function sendRequest() {
        // 开始发送请求时，将 loading 状态设置为 true，表示正在加载
        setLoading(true);
        // 清除之前可能存在的错误信息
        setError(null);

        try {
            // 调用 getAccessToken 函数获取访问令牌
            const accessToken = await getAccessToken();
            // 配置请求选项
            const options = {
                // 请求方法为 POST
                method: "POST",
                // 请求的 URL，包含获取到的访问令牌
                url:
                    "/baidu/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=" +
                    accessToken,
                // 请求头设置为 JSON 格式
                headers: {
                    "Content-Type": "application/json",
                },
                // 请求体数据，以 JSON 字符串形式发送
                data: JSON.stringify({
                    messages: [
                        {
                            // 消息的角色为用户
                            role: "user",
                            // 消息的内容为 xiaoAI 的值
                            content: xiaoAI,
                        },
                    ],
                    // 温度参数，控制生成结果的随机性，值越大越随机
                    temperature: 0.8,
                    // 核采样概率，用于控制生成文本的多样性
                    top_p: 0.8,
                    // 惩罚分数，用于调整生成文本的概率分布
                    penalty_score: 1,
                    // 是否禁用搜索功能
                    disable_search: false,
                    // 是否启用引用功能
                    enable_citation: false,
                    // 是否折叠响应结果
                    collapsed: true,
                }),
            };

            // 使用 axios 发送请求，并等待响应
            const response = await axios(options);
            // 将响应数据存储到 responseData 状态中
            setResponseData(response.data);
        } catch (err) {
            // 如果请求过程中出现错误，将错误信息存储到 error 状态中
            setError(err.message || "An unknown error occurred");
        } finally {
            // 无论请求成功还是失败，将 loading 状态设置为 false，表示加载结束
            setLoading(false);
        }
    }

    /**
     * 使用 AK 和 SK 生成鉴权签名（Access Token）
     * @return Promise<string> 鉴权签名信息（Access Token）的 Promise
     */
    function getAccessToken() {
        // 配置获取访问令牌的请求选项
        const options = {
            // 请求方法为 POST
            method: "POST",
            // 请求的 URL，包含 AK 和 SK
            url:
                "/baidutok/token?grant_type=client_credentials&client_id=" +
                AK +
                "&client_secret=" +
                SK,
        };
        // 使用 axios 发送请求，并返回包含访问令牌的 Promise
        return axios(options).then(res => res.data.access_token);
    }

    // 使用 useEffect 钩子监听 xiaoAI 的变化
    useEffect(() => {
        // 如果 xiaoAI 有值，则调用 sendRequest 函数发送请求
        if (xiaoAI) {
            sendRequest();
        }
    }, [xiaoAI]);

    return (
        <div>
            {/* 如果存在错误信息，显示红色的错误提示 */}
            {error && <p style={{ color: "red" }}>Error: {error}</p>}
            {/* 如果正在加载，显示蓝色的加载提示 */}
            {loading && <p style={{ color: "blue" }}>正在积极回答中...</p>}
            {/* 如果有响应数据，显示 AI 的回复并传递给 Createtext 组件 */}
            {responseData && (
                <div>
                    {/* 以格式化的 JSON 形式显示 AI 的回复，缩进为 1 个空格 */}
                    <pre className="AI_response">小爱:{JSON.stringify(responseData.result, null, 1)}</pre>
                    {/* 将 AI 的回复作为 text 属性传递给 Createtext 组件 */}
                    <Createtext text={JSON.stringify(responseData.result, null, 1)}/>
                </div>
            )}
        </div>
    );
};

// 导出 MyComponent 组件，以便在其他地方使用
export default MyComponent;